<template>
	<el-main style="padding:0 20px;">
		<el-descriptions :column="1" border>
			<el-descriptions-item label="请求路由">{{ data.router }}</el-descriptions-item>
			<el-descriptions-item label="请求方法">{{ data.method }}</el-descriptions-item>
			<el-descriptions-item label="状态代码">{{ data.response_code }}</el-descriptions-item>
			<el-descriptions-item label="业务名称">{{ data.service_name }}</el-descriptions-item>
			<el-descriptions-item label="操作用户">{{ data.username }}</el-descriptions-item>
			<el-descriptions-item label="请求时间">{{ data.created_at }}</el-descriptions-item>
			<el-descriptions-item label="用户IP">{{ data.ip }}</el-descriptions-item>
			<el-descriptions-item label="用户地点">{{ data.ip_location }}</el-descriptions-item>
		</el-descriptions>
		<el-collapse v-model="activeNames" style="margin-top: 20px;" accordion>
			<el-collapse-item title="请求数据" name="request">
				<ma-highlight :code="data.request_data" lang="json"/>
			</el-collapse-item>
			<el-collapse-item title="响应数据" name="response">
				<ma-highlight :code="data.response_data" lang="json"/>
			</el-collapse-item>
		</el-collapse>
	</el-main>
</template>

<script>
import maHighlight from '@/components/maHighlight'

export default {
	components: {
		maHighlight
	},
	data() {
		return {
			data: {},
			activeNames: ['request'],
		}
	},
	methods: {
		setData(data) {
			this.data = data
		}
	}
}
</script>
